/*-----------------------------------------main-----------------------------*/
var myChart1 =null;
$.ajax({ //一个Ajax过程
    type: "post",  //以post方式与后台沟通
    url: "sy/index/plantArea", //与此php页面沟通
    dataType: 'json',//从php返回的值以 JSON方式 解释
    success: function (json) {
        var jsonarray= $.parseJSON(json)
        myChart1 = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
        var option = {
            tooltip: { //提示框组件
                trigger: 'item', //触发类型(饼状图片就是用这个)
                formatter: "{b} : {c}% " //提示框浮层内容格式器
            },
            color: ['#BF4746', '#83B15A', '#DE9B32', '#49B4D7'],
            legend: {
                textStyle: {
                    color: 'white'
                },
                orient: 'vertical',
                x: '0%',
                top: '0%',
                itemHeight: 10,//图例的高度
                itemGap: 0,//图例之间的间距
                data: ['玉米', '大豆','水稻', '马铃薯']//图例的名字需要和饼图的name一致，才会显示图例
            },
            series: [ //系列列表
                {
                    type: 'pie',   //类型 pie表示饼图
                    center: ['60%', '50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                    radius: ['70%', '80%'],
                    itemStyle: {  //图形样式
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。

                            label: {  //饼图图形上的文本标签
                                formatter: '{a}-{d}% ',
                                show: true //平常不显示
                            },
                            labelLine: {     //标签的视觉引导线样式

                                smooth: 0.2,
                                length: 10
                            },
                        }
                    },//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    data: []
                }, {
                    type: 'pie',   //类型 pie表示饼图
                    center: ['60%', '50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                    radius: ['50%', '60%'],
                    itemStyle: {  //图形样式
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            label: {  //饼图图形上的文本标签
                                formatter: '{a}-{d}% ',
                                show: true //平常不显示
                            },
                            labelLine: {     //标签的视觉引导线样式
                                length: 40 //平常不显示
                            },
                        }
                    },//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    data: []
                }, {
                    type: 'pie',   //类型 pie表示饼图
                    center: ['60%', '50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                    radius: ['30%', '40%'],
                    itemStyle: {  //图形样式
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            label: {  //饼图图形上的文本标签
                                formatter: '{a}-{d}% ',
                                show: true //平常不显示
                            },
                            labelLine: {     //标签的视觉引导线样式
                                length: 40  //平常不显示
                            },
                        }
                    },//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    data: []
                }, {

                    type: 'pie',   //类型 pie表示饼图
                    center: ['60%', '50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                    radius: ['10%', '20%'],
                    itemStyle: {  //图形样式
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            label: {  //饼图图形上的文本标签
                                formatter: '{a}-{d}% ',
                                show: true //平常不显示
                            },
                            labelLine: {     //标签的视觉引导线样式
                                length: 30,  //平常不显示
                                length2: 40  //平常不显示
                            },
                        }
                    },//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    data: []
                }
            ]
        }
        $.each(jsonarray, function (index, item) {
            var newArray = {};
            var itemStyle = {};
            var normal = {};
            newArray.name = item.type;
            newArray.value = item.value;
            if (index == 1) {
                normal.color = '#83B15A';
            } else if (index == 2) {
                normal.color = '#DE9B32';
            } else if (index == 3) {
                normal.color = '#49B4D7';
            } else {
                normal.color = '#BF4746';
            }
            itemStyle.normal = normal;
            newArray.itemStyle = itemStyle;
            var newArray2 = {};
            var itemStyle2 = {};
            var normal2 = {};
            newArray2.name = item.type;
            newArray2.value = 100 - item.value;

            normal2.color = 'transparent';
            itemStyle2.normal = normal2;
            newArray2.itemStyle = itemStyle2;
            option.series[index].name = (item.type);
            option.series[index].data.push(newArray2);
            option.series[index].data.push(newArray);
        });
        myChart1.setOption(option);
    }
});
/*-----------------------------------------main2----------------------------------------------*/
var myChart2 =null;
$.ajax({ //一个Ajax过程
    type: "post",  //以post方式与后台沟通
    url: "sy/index/plantType", //与此php页面沟通
    dataType: 'json',//从php返回的值以 JSON方式 解释
    success: function (json) {
        var jsonarray= $.parseJSON(json)
        myChart2 = echarts.init(document.getElementById('main2'));
// 指定图表的配置项和数据
        var option = {
            tooltip: { //提示框组件
                trigger: 'item', //触发类型(饼状图片就是用这个)
                formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
            },
            color: ['#009DE6', '#8C4CE2', '#E24C68', '#E2B94C'],  //手动设置每个图例的颜色
            series: [ //系列列表
                {
                    name: '作物品种',  //系列名称
                    type: 'pie',   //类型 pie表示饼图
                    center: ['50%', '40%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                    radius: ['30%', '60%'],  //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    itemStyle: {  //图形样式
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            label: {  //饼图图形上的文本标签
                                formatter: '{b}:{c}公顷 ',
                                show: true  //平常不显示
                            },
                            labelLine: {     //标签的视觉引导线样式
                                show: true  //平常不显示
                            }
                        },
                        emphasis: {   //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            label: {  //饼图图形上的文本标签
                                show: true,
                                position: 'center',
                                textStyle: {
                                    fontSize: '10',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: []
                }
            ]
        };

        $.each(jsonarray, function (index, item) {
            var newArray = {};
            newArray.name = item.type;
            newArray.value = item.value;
            option.series[0].data.push(newArray);
        });

        myChart2.setOption(option);
    }
});

/*----------------------------------------main3----------------------------------*/
var myChart3 = null;
$.ajax({ //一个Ajax过程
    type: "post",  //以post方式与后台沟通
    url: "sy/index/GrainYield", //与此php页面沟通
    dataType: 'json',//从php返回的值以 JSON方式 解释
    success: function (json) {
        var jsonarray= $.parseJSON(json)
        myChart3 = echarts.init(document.getElementById('main3'));
        option = {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '8%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [ '2015', '2016', '2017', '2018'],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            series: [
                {
                    name: '马铃薯',
                    type: 'line',
                    stack: '总量',
                    symbol: 'none',  //这句就是去掉点的
                    smooth: true,  //这句就是让曲线变平滑的
                    data: []
                },
                {
                    name: '大豆',
                    type: 'line',
                    stack: '总量',
                    symbol: 'none',  //这句就是去掉点的
                    smooth: true,
                    data: [] //这句就是让曲线变平滑的
                },
                {
                    name: '玉米',
                    type: 'line',
                    stack: '总量',
                    symbol: 'none',  //这句就是去掉点的
                    smooth: true,  //这句就是让曲线变平滑的
                    data: []
                },
                {
                    name: '水稻',
                    type: 'line',
                    stack: '总量',
                    symbol: 'none',  //这句就是去掉点的
                    smooth: true,  //这句就是让曲线变平滑的
                    data: []
                }
            ]
        };
        $.each(jsonarray, function (index, item) {
            if (item.type == "马铃薯") {
                option.series[0].data.push(item.value);
            } else if (item.type == "大豆") {
                option.series[1].data.push(item.value);
            } else if (item.type == "玉米") {
                option.series[2].data.push(item.value);
            } else {
                option.series[3].data.push(item.value);
            }
        });
        myChart3.setOption(option);
    }
});

/*-----------------------------------------main4------------------------------------------------*/
var myChart4 = null;
$.ajax({ //一个Ajax过程
    type: "post",  //以post方式与后台沟通
    url: "sy/index/GrainSales", //与此php页面沟通
    dataType: 'json',//从php返回的值以 JSON方式 解释
    success: function (json) {
        var jsonarray= $.parseJSON(json)
        // 基于准备好的dom，初始化echarts实例
        myChart4 = echarts.init(document.getElementById('main4'));

// 指定图表的配置项和数据
//         var option = {
//             tooltip: {},
//             grid: {
//                 x: '10%',
//                 x2: '5%',
//                 y: '10%',
//                 y2: '20%'
//
//             },
//             legend: {
//                 data: ['销量'],
//                 x: 'right', // 'center' | 'left' | {number},
//                 y: 'top', // 'center' | 'bottom' | {number}
//                 textStyle: {    //图例文字的样式
//                     color: 'white',  //文字颜色
//                 },
//             },
//             xAxis: [
//                 {
//                     type: 'category',
//                     data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',],
//                     //设置轴线的属性
//                     axisLine: {
//                         lineStyle: {
//                             color: '#ffffff',
//                             width: 1,//这里是为了突出显示加上的
//                         }
//                     }
//                 }
//             ],
//             yAxis: {
//                 axisLine: {
//                     lineStyle: {
//                         color: '#ffffff',
//                         width: 1,   //这里是为了突出显示加上的
//                     },
//
//                 }
//             },
//             series: [
//                 {
//                     name: "销量",
//                     type: "bar",
//                     data: [],
//                     itemStyle: {
//                         normal: {
//                             color: function (d) {
//                                 return "#" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
//                             }
//                         }
//                     },
//                 },
//
//             ],
//             label: {
//                 show: true,  //柱头数字
//                 position: 'top',
//                 textStyle: {
//                     fontSize: '10',
//                     fontFamily: '微软雅黑',
//                     fontWeight: 'bold',
//                     color: 'white'
//                 }
//             }
//         }
//         $.each(jsonarray, function (index, item) {
//             option.series[0].data.push(item.value);
//         });
//         myChart.setOption(option);

        option = {
            title: {
                text: ' ',
                subtext: '单位(万吨)',
                left: 'right'
            },
            textStyle: {
                color: '#fff',// 图例文字颜色
            },
            color: ['#f35948','#32c5e9','#1786ff','#dcca39'],
            legend: {
                textStyle: {
                    color: '#11c0ff'                              // 图例文字颜色
                },
            },
            tooltip: {},
            dataset: {
                source: [
                    ['product', '水稻', '玉米', '大豆','马铃薯'],
                    /*['2017', 6.5586885, 6.6922310, 5.6491344,13.0650000],
                    ['2018', 9.5625075, 43.5346535, 0.7407270,6.5878800],
                    ['2019', 7.5166455, 15.9252925, 0.5254704,5.2231400]*/
                    ['2017', 4.036116, 4.118296, 3.4763904,8.04],
                    ['2018', 5.88462, 26.790556, 0.455832,4.05408],
                    ['2019', 4.625628, 9.80018, 0.3233664,3.21424]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {
                // axisLabel: {
                //     formatter: '{value} 万斤'
                // },
                // axisLabel: {
                //     formatter: '{value} Kg'
                // },
            },
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'},
            ]
        };
        myChart4.setOption(option);
        myChart4.on('click', function (params) {
            window.open('http://ecohlj.com/');
        });

        window.onresize = function(){

            myChart1.resize();

            myChart2.resize();

            myChart3.resize();

            myChart4.resize();


        }

    }
});

